<script setup lang="ts">
import { getUserInfo, exit } from '@/api/user'
import { onMounted, ref } from 'vue'
import type { UserInfo } from '@/types/data'
import { useRouter } from 'vue-router'
import useToken from '@/stores/token'
import { showConfirmDialog } from 'vant'
const { clearToken } = useToken()
const router = useRouter()
// import { Grid } from 'vant'
const userinfo = ref<Partial<UserInfo>>({})
const getUserInfoAPI = async () => {
  const res = await getUserInfo()
  console.log(res)
  userinfo.value = res.data
}
const logout = async () => {
  showConfirmDialog({
    title: '提示',
    message: '你确认要退出,真的不再看看了吗?'
  })
    .then(async () => {
      // on confirm
      await exit()
      clearToken()
      router.push('/login')
    })
    .catch(() => {
      // on cancel
    })
}
onMounted(() => {
  getUserInfoAPI()
})
</script>
<template>
  <div class="my">
    <header>
      <img :src="userinfo.avatar" alt="" />
      <div class="name">{{ userinfo.username }}</div>
    </header>
    <!--  -->
    <van-grid clickable :column-num="3" :border="false">
      <van-grid-item icon="clock-o" text="历史记录" to="/" />
      <van-grid-item icon="bookmark-o" text="我的收藏" to="/collect" />
      <van-grid-item icon="thumb-circle-o" text="我的点赞" to="/like" />
    </van-grid>

    <div class="message" style="margin-top: 20px">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" @click="logout" is-link />
    </div>
  </div>
</template>
<style scoped lang="less">
.my {
  background-color: #f5f5f5;
  // background-color: pink;
  height: 100vh;
  padding: 0 10px;
}
header {
  // background-color: #fff;
  padding-top: 50px;
  display: flex;
  margin-bottom: 20px;
  img {
    margin-left: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
  .name {
    font-size: 24px;
    margin-top: 25px;
    margin-left: 30px;
  }
}
</style>
